<template>
  <div class="hot_item" @cilck="MovieDetail(e.id)">
    <div class="item-l">
      <img :src="e.img" alt />
    </div>
    <div class="item-m">
      <div class="item-m-top">
        <div class="title">{{e.nm}}</div>
      </div>
      <div class="item-m-sc">
        <span class="sc">
          {{e.wish}}<span>人想看</span>
        </span>
        <div class="star">张予曦,黄小蕾,黄景行</div>
        <div class="showInfo">2021-11-26上映</div>
      </div>
    </div>
    <div class="item-r">
      <button class="btn" @click="AddCart(e.id)">预售</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "DaiyingItem",
  props: {
    e: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  methods: {
    MovieDetail(MovieId) {
      this.$router.push({ name: "Detail", params: { MovieId } });
    },
    AddCart(MovieId) {
      this.$router.push({ name: "Mtrade", params: { MovieId } });
    }
  }
};
</script>

<style lang="less" scoped>
.hot_item {
  display: flex;
  background-color: #fff;
  .item-l {
    width: 64px;
    margin: 10px;
    img {
      width: 100%;
      height: auto;
    }
  }

  .item-m {
    border-bottom: 1px solid rgb(250, 249, 249);
    margin-top: 10px;
    line-height: 20px;
    width: 220px;
    .item-m-top {
      display: flex;
      justify-content: space-between;
    }
    .title {
      font-size: 0.4rem;
      margin-bottom: 8px;
      color: #333;
      font-weight: 700;
      padding-right: 0.1rem;
      width: 100%;
      position: relative;
    }
    .v2d {
      flex: 1;
      height: 28px;
      width: 86px;
      margin-right: 2rem;
      display: inline-block;
      background: url("../assets/v2dimax.png") no-repeat center;
      background-size: 50% 50%;
    }
    .item-m-sc {
      font-size: 0.26rem;
      color: #666;
      .sc {
        font-weight: 700;
        color: #faaf00;
        font-size: 0.49rem;
        span {
          font-size: 0.26rem;
          margin-left: -0.04rem;
          display: inline-block;
          color: #666;
        }
      }
    }
  }
  .item-r {
    position: relative;
    .btn {
      position: absolute;
      top: ceil(50%-8px);
      left: 15px;
      width: 54px;
      height: 26px;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      background-color: rgb(60, 159, 230);
      color: rgb(223, 239, 251);
      white-space: nowrap;
      font-size: 0.26rem;
      font-weight: 500;
      cursor: pointer;
      border: none;
      border-radius: 0.27rem;
    }
  }
}
</style>